<template>
  <el-dialog :title="$t('tool.rightMenu.' + title)" :visible.sync="dialogFormVisible" custom-class="jtyj-dialog"
    :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-position="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="$t('tool.modelManage.digitalMachineName')" prop="digitalMachineName">
            <el-input v-model="form.digitalMachineName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('tool.modelManage.digitalMachineEnglishName')" prop="digitalMachineEnglishName">
            <el-input v-model="form.digitalMachineEnglishName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('tool.modelManage.digitalMachineCode')" prop="digitalMachineCode">
            <el-input-number controls-position="right" v-model="form.digitalMachineCode"
              placeholder="请输入"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item :label="$t('tool.modelManage.digitalMachineDescribe')" prop="digitalMachineDescribe">
            <el-input type="textarea" v-model="form.digitalMachineDescribe" autocomplete="off" class="jtyj-input"
              :placeholder="$t('tool.others.placehoderInput')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="jtyj-btn-cancel" @click="cancel">{{
        $t("setup.buttonText.cancel")
      }}</el-button>
      <el-button class="jtyj-btn-primary" @click="submitForm">{{
        $t("setup.buttonText.save")
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addModel,
  updateModel,
} from "@/api/myspace/model-manage-tool/model-manage";
import { mapState } from "vuex";
export default {
  data() {
    return {
      title: "addDigitalMachine",
      dialogFormVisible: false,
      form: {
        userId: null,
        digitalMachineName: null,
        digitalMachineEnglistName: null,
        digitalMachineCode: null,
        digitalMachineDescribe: null,
        parentId: 0,
        nodeType: 1,
      },
      treeData: [],
      rules: {
        digitalMachineName: [{ required: true, message: "请输入名称", trigger: "blur" }],
        digitalMachineEnglistName: [{ required: true, message: "请输入英文名称", trigger: "blur" }],
        digitalMachineCode: [{ required: true, message: "请输入代号", trigger: "blur" }],
        digitalMachineDescribe: [{ required: true, message: "请输入描述", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.id,
    }),
  },
  mounted() {
  },
  methods: {
    init(sign, node) {
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs['form'].resetFields();
        if (sign == "add") {
          this.title = "newExperiment";
          this.form.parentId = node ? node.id : 0
        } else {
          this.title = "edit";
          this.form.parentId = node.parentId;
          this.form.digitalMachineName = node.name;
          this.form.digitalMachineEnglistName = node.englishName;
          this.form.digitalMachineCode = node.code;
          this.form.digitalMachineDescribe = node.describe;
        }
      });
    },

    cancel() {
      this.dialogFormVisible = false;
    },
    // 表单提交
    submitForm() {
      this.form.userId = this.userId;
      this.$refs["form"].validate((valid) => {
        console.log('valid', valid);

        if (valid) {
          if (this.form.modelId == null) {
            addModel(this.form).then((response) => {
              if (response.code == 200) {
                this.$message.success(
                  this.$toolHandle.getI18nName(
                    this.$zh.setup.responseText,
                    this.$en.setup.responseText,
                    this.$i18n.locale,
                    "success"
                  )
                );
                let newNodeId = response.data;
                this.$emit("refresh", newNodeId);
                this.dialogFormVisible = false;
              }
            });
          } else {
            updateModel(this.form).then((response) => {
              if (response.code == 200) {
                this.$message.success(
                  this.$toolHandle.getI18nName(
                    this.$zh.setup.responseText,
                    this.$en.setup.responseText,
                    this.$i18n.locale,
                    "success"
                  )
                );
                this.$emit("refresh");
                this.dialogFormVisible = false;
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.jtyj-input {
  width: 100%;
}
</style>